<template>
  <div class="bg">
    <div class="head">
      <div class="clienttopleft">
				欢迎使用重明新闻查看疫情最新消息，感谢您的使用！
			</div>
      <div class="clienttopright">
        <div @click="gohome" class="gohome">新闻首页</div>
        <el-button @click="denglu" v-if="$userInfo.token == ''"  size="mini" type="primary" round>登录</el-button>
				<div class="ma-img" v-else>
						<img v-if="$user_pic != 'undefined' && $user_pic != 'null' && $user_pic != ''" class="headimg" :src="$user_pic">
						<img v-else class="headimg" src="../../assets/img/head.png">
       </div>
			</div>
    </div>
    <div class="bgcontent">
      <div class="content">
        <div class="yiqingimg">
          <div class="feiyan">新型冠状病毒肺炎</div>
          <h1 class="feiyanname">疫情实时大数据报告</h1>
          <div class="datelaiyuan">数据来源于网易公共信息</div>
        </div>
        <div class="yiqinum">
          <div class="yqtype">
            <div class="yiqingtab" @click="typeBoo = true">
              <div class="yiqingtype" :class="typeBoo?'typeBoo':''">国内疫情</div>
            </div>
            <div class="yiqingtab" @click="typeBoo = false">
              <div class="yiqingtype" :class="typeBoo?'':'typeBoo'">疫情分析</div>
            </div>
          </div>
          <yiqing-num v-show="typeBoo" :tableData="tableData" :yiqingList="yiqingList"></yiqing-num>
          <div class="echars" v-show="!typeBoo">
            <echars-china-map :mapList="mapList"></echars-china-map>
            <echars-tubiao :dataListname="dataListname" :dataListvalue="dataListvalue"></echars-tubiao>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import yiqingNum from '../../components/yiqingNum.vue'
import echarsChinaMap from '../../components/echarsChinaMap.vue'
import echarsTubiao from '../../components/echarsTubiao.vue'
export default {
  components:{
    'yiqing-num':yiqingNum,
    'echars-china-map':echarsChinaMap,
    'echars-tubiao':echarsTubiao
  },
  data() {
    return{
      dataListname:[],
      dataListvalue:[],
      typeBoo:true,
      mapList:[],
      tableData:[],
      yiqingList:{
				qz:{
					total:0,
					add:0,
          xy:0
				},
				jy:{
					total:0,
					add:0,
          xy:0
				},
				sw:{
					total:0,
					add:0
				},
				zy:{
					total:0,
					add:0
				},
        extData:{
          total:0,
					add:0
        },
        bt:{
          total:0,
					add:0
        },
				time:''
			},
    }
  },
  mounted(){
    this.queryYiqing()
  },
  methods:{
    //触发登录
		denglu(){
			this.$router.push("/record");
		},
    gohome(){
      this.$router.push("/client/clientHome");
    },
    	//获取疫情信息
		queryYiqing(){
			this.$http.get('/ug/api/wuhan/app/data/list-total').then(res => {
				this.yiqingList.time = res.data.overseaLastUpdateTime
				this.yiqingList.qz.total = res.data.chinaTotal.total.confirm
				this.yiqingList.qz.add = res.data.chinaTotal.today.confirm
				this.yiqingList.jy.total = res.data.chinaTotal.total.input
				this.yiqingList.jy.add = res.data.chinaTotal.today.input
				this.yiqingList.zy.total = res.data.chinaTotal.total.heal
				this.yiqingList.zy.add = res.data.chinaTotal.today.heal
				this.yiqingList.sw.total = res.data.chinaTotal.total.dead
				this.yiqingList.sw.add = res.data.chinaTotal.today.dead
        this.yiqingList.extData.total = res.data.chinaTotal.extData.noSymptom
				this.yiqingList.extData.add = res.data.chinaTotal.extData.incrNoSymptom
        this.yiqingList.qz.xy = this.yiqingList.qz.total - this.yiqingList.zy.total - res.data.chinaTotal.total.dead
        let add = 0
        let total = 0
        let other = 0
        let id = 0
				res.data.areaTree.forEach(item => {
					if(item.name == "中国"){
						item.children.forEach(item2 => {
              let data = {
                id:++id,
                name:item2.name,
                add:item2.today.confirm,
                sw:item2.total.dead,
                lj:item2.total.confirm,
                zy:item2.total.heal,
                children:[]
              }
              item2.children.forEach(item3 => {
                let data1 = {
                  id:++id,
                  name:item3.name,
                  add:item3.today.confirm,
                  sw:item3.total.dead,
                  lj:item3.total.confirm,
                  zy:item3.total.heal,
                }
                data.children.push(data1)
                // if(item3.name == '未明确地区'){
                //   console.log(item2.name,item3.today.confirm,'item3')
                // }
              })
              this.tableData.push(data)
              if(item2.name != '香港' && item2.name != '台湾' && item2.name != '澳门'){
                add += item2.today.confirm
                total += (item2.total.confirm - item2.total.dead - item2.total.heal)
              }
              // if(item2.name == '香港' || item2.name == '台湾' || item2.name == '澳门'){
              //   other += (item2.total.confirm - item2.total.dead - item2.total.heal)
              // }
              let mapdata = {
                name:item2.name,
                value:item2.total.confirm
              }
              this.mapList.push(mapdata)
						})
					}
				})
        this.yiqingList.bt.add = add - this.yiqingList.jy.add
        this.yiqingList.bt.total = total 
        //this.yiqingList.jy.xy = this.yiqingList.qz.xy - other - this.yiqingList.bt.total
        res.data.chinaDayList.reverse()
        let i = 0
        res.data.chinaDayList.forEach((item,index) => {
          if(index == i && this.dataListname.length <= 12 ){
            let time = ''
            if(item.date[5] == '0'){
              time = item.date.slice(6,10)
            }else {
              time = item.date.slice(5,10)
            }
            this.dataListname.push(time)
            this.dataListvalue.push(item.today.confirm)
            i += 5
          }
          if(index <= 10  ){
            other += item.today.input
          }
        })
        this.yiqingList.jy.xy =  other 
        this.dataListname.reverse()
        this.dataListvalue.reverse()
      })
		},
  }
}
</script>
<style scoped>
.bg{
  background-color: #10aeb5;
  overflow: auto;
	width: 100%;
	position: fixed;
	top: 0;
  right: 0;
  left: 0;
	bottom: 0;
}
.head{
  min-width: 768px;
  height: 60px;
  background-color: white;
  display: flex;
  align-items: center;
}
.clienttopleft{
	flex:1;
	padding-left: 20px;
	font-size: 16px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	width:100%;
}
.ma-img{
  font-size: 14px;
  display: flex;
  align-items: center;
  height: 100%;
  color: rgb(241, 243, 248);
  cursor: pointer;
  right: 20px;
}
.headimg{
  width: 32px;
  height: 32px;
  border-radius: 50%;
	z-index:9999;
	display: flex;
}
.clienttopright{
	display: flex;
	align-items: center;
	margin-right: 20px;
	justify-content: right;
	font-size: 16px;
	color: white;
	cursor: pointer;
}
.gohome{
  color: #000;
  font-size: 13px;
  line-height: 13px;
  margin-right: 22px;
  font: 13px arial;
}
.bgcontent{
  display: flex;
  justify-content: center;
  min-width: 768px;
  background-color: #10aeb5;
  padding-bottom: 50px;
}
.content{
  width: 768px;
}
.yiqingimg{
  background-image: url('../../assets/img/yqbg.png');
  height: 170px;
  background-size: 695px 170px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.yiqinum{
  border-radius: 15px;
  background-color: white;
}
.feiyan{
  margin-left: 17px;
  font-size: .875rem;
  font-weight: bold;
  padding-top: 30px;
  color: #c4faff;
}
.feiyanname{
  margin-left: 17px;
  font-size: 33px;
  background-image:-webkit-linear-gradient(bottom,#afdade,white); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent; 
}
.datelaiyuan{
  display: inline-block;
  margin-left: 17px;
  height: 1.4375rem;
  line-height: 1.4375rem;
  padding: 0 0.625rem;
  color: white;
  background-color: rgba(9,148,167,.5);
  border-radius: 0.71875rem;
  font-size: .6875rem;
}
.yqtype{
  display: flex;
  border-bottom:1px solid #f5f6f7;
}
.yiqingtab{
  flex: 1;
  display: flex;
  justify-content: center;
}
.yiqingtype{
 height: 40px;
 display: flex;
 cursor: pointer;
 align-items: center;
}
.typeBoo{
  font-weight: bold;
  border-bottom: 3px solid #10aeb5;
  color: #10aeb5;
}
.echars{
  width: 100%;
  padding: 20px 0;
}
</style>